<template>
    <div class="card-list">
        <a-list
                :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
                :dataSource="dataSource"
        >
            <a-list-item slot="renderItem" slot-scope="item">
                <template v-if="item.add">
                    <a-button class="new-btn" type="dashed" @click="addExpert">
                        <a-icon type="plus"/>
                        增加专家信息
                    </a-button>
                </template>

                <template v-else>
                    <a-card :hoverable="true">
                        <a-card-meta>
                            <div style="margin-bottom: 3px" slot="title">{{item.title}}</div>

                            <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>

                            <div class="meta-content" slot="description">{{item.content}}</div>
                            <div slot="description">电话：{{item.phoneInputs}}</div>
                        </a-card-meta>
                        <a slot="actions" @click="changeExpert(item)">修改</a>
                        <a slot="actions" @click="showModal(item.id)">删除</a>
                    </a-card>
                </template>

            </a-list-item>
        </a-list>

        <a-modal
                title="删除专家信息"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
        >
            <p>{{ ModalText }}</p>
        </a-modal>

    </div>
</template>

<script>
    import Axios from 'axios'

    /**
     * 专家卡片列表
     */
    export default {
        name: 'CardList',
        data() {
            return {
                id: null,
                ModalText: "是否要删除专家信息",
                url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
                visible: false,
                confirmLoading: false,
                desc: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
                linkList: [
                    {icon: 'rocket', href: '/#/', title: '快速开始'},
                    {icon: 'info-circle-o', href: '/#/', title: '产品简介'},
                    {icon: 'file-text', href: '/#/', title: '产品文档'}
                ],
                extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
                dataSource: [],
            }
        },
        mounted() {
            this.dataSource.push({
                add: true
            })
            Axios.get(this.url + "/pxManagerSystem/getSpecialUserList")
                .then(
                    (res) => {
                      //  console.log(res.data.data.speciallist.length)
                        for (let i = 0; i < res.data.data.speciallist.length; i++) {
                        //    console.log(res.data.data.speciallist[i])
                            const Sdata = res.data.data.speciallist[i]
                            this.dataSource.push({
                                id: Sdata.specialist_id,
                                expertNameInputs: Sdata.specialist_name,
                                expertPasswordInputs: Sdata.specialist_pass,
                                doubleExpertPasswordInputs: Sdata.specialist_pass,
                                titleInputs: Sdata.specialist_realname,
                                technicalInputs: Sdata.professional_title,
                                phoneInputs: Sdata.specialist_contact,
                                describeInputs: "123",

                                ModalText: '是否要删除专家信息',
                                // title: '专家' + i,
                                title: Sdata.specialist_realname,
                                avatar: 'https://cn.vuejs.org/images/logo.svg',
                                content: '职位：' + Sdata.professional_title

                            })
                        }
                    }
                )
        },
        methods: {
            showModal(id) {
                // this.dataSource
                this.id = id;
                this.visible = true;
            },
            handleOk() {
                this.ModalText = '信息正在删除。。。。。';
                this.confirmLoading = true;
                setTimeout(() => {
                    this.visible = false;
                    this.confirmLoading = false;
                    this.ModalText = "是否要删除专家信息";
                    Axios.delete(this.url+"/pxManagerSystem/deleteSpecialByUserId",{
                        data:{
                            specialist_id : this.id
                        }
                    }).then(
                        ()=>this.dataSource = this.dataSource.filter((item) => item.id != this.id)
                    )

                }, 2000);
            },
            handleCancel() {
                console.log('Clicked cancel button放洋屁');
                this.visible = false;
            },
            addExpert() {
                this.$router.push({
                    name: '添加专家信息',
                    params: {
                        id: null,
                        item: {
                            expertNameInputs: "",
                            expertPasswordInputs: "",
                            doubleExpertPasswordInputs: "",
                            titleInputs: "",
                            technicalInputs: "",
                            phoneInputs: "",
                            describeInputs: "",
                        }
                    }
                })
            },

            changeExpert(item) {//修改专家信息
               // console.log(item);

                this.$router.push({
                    name: '添加专家信息',
                    params: {
                        id: item.id,
                        // item: {
                        //     expertNameInputs: "123",
                        //     expertPasswordInputs: "123",
                        //     doubleExpertPasswordInputs: "123",
                        //     titleInputs: "123",
                        //     technicalInputs: "123",
                        //     phoneInputs: "123",
                        //     describeInputs: "123",
                        // }
                        item: item

                    }

                });
            },
            test() {

                //console.log(id)
            },


        },

    }
</script>

<style lang="less" scoped>
    .card-avatar {
        width: 48px;
        height: 48px;
        border-radius: 48px;
    }

    .new-btn {
        border-radius: 2px;
        width: 100%;
        height: 176px;
    }

    .meta-content {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        height: 32px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

</style>
